<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getAllTagsAPI, addOrUpdateTagAPI, deleteTagAPI } from './apis'
import type { Tag } from './type'
// 获取所有标签表格数据
const tags = ref<Tag[]>([])
// 获取所有标签
const getAllTags = async () => {
  const res = await getAllTagsAPI()
  if (res.code === 0) {
    tags.value = res.data
  }
}
onMounted(() => {
  getAllTags()
})

// 添加或修改标签对话框显示隐藏
const addOrUpdateTag = ref<boolean>(false)
const tagParmas = reactive<Tag>({
  parentId: '', // 空为一级
  id: '',
  name: '',
  description: '',
})
// 添加标签
const addTag = () => {
  Object.assign(tagParmas, { id: '', parentId: '', name: '', description: '' })
  addOrUpdateTag.value = true
}
// 修改标签
const updateTag = (row: Tag) => {
  Object.assign(tagParmas, row)
  addOrUpdateTag.value = true
}
// 保存或修改标签
const saveOrUpdateTag = async () => {
  const { id, name, description, parentId } = tagParmas
  const params = id ? tagParmas : { name, description, parentId }
  const res = await addOrUpdateTagAPI(params)
  if (res.code === 0) {
    addOrUpdateTag.value = false
    getAllTags()
  }
}
// 删除标签
const remove = async (row: Tag) => {
  const res = await deleteTagAPI([row.id as string])
  if (res.code === 0) {
    getAllTags()
  }
}
const findTagName = ref<string>('')
// 查询标签
const findTag = async () => {
  tags.value = tags.value.filter((tag) => tag.name.includes(findTagName.value))
}
// 关闭查询
const closeFind = () => {
  findTagName.value = ''
  getAllTags()
}
</script>

<template>
  <el-card>
    <div class="add-tag">
      <el-button type="primary" icon="Plus" @click="addTag">添加标签</el-button>
      <el-form inline>
        <el-form-item label="搜索标签">
          <el-input v-model="findTagName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findTag">搜索</el-button>
          <el-button @click="closeFind">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table border :data="tags">
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column label="标签名称" prop="name" width="200" align="center"></el-table-column>
      <el-table-column label="标签描述" prop="description"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row, index }">
          <el-button type="primary" @click="updateTag(row)">编辑</el-button>
          <el-button type="danger" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增或修改dialog框 -->
    <el-dialog :title="tagParmas.id ? '修改标签' : '新增标签'" v-model="addOrUpdateTag">
      <el-form>
        <el-form-item label="标签名称">
          <el-input v-model="tagParmas.name"></el-input>
        </el-form-item>
        <el-form-item label="标签描述">
          <el-input v-model="tagParmas.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveOrUpdateTag">保存</el-button>
          <el-button @click="addOrUpdateTag = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<style lang="scss" scoped>
.el-card {
  height: 100%;
  .add-tag {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
